<template>
  <div class="container">
    <div class="table-content">
      <a-table
        class="table"
        :columns="columns"
        :data-source="store.applicationList"
        :loading="store.loading"
        :scroll="{ x: 1500, y: 700 }"
        :pagination="false"
      >
      </a-table>
    </div>
    <div class="page-content">
      <a-pagination
        v-if="store.total > 0"
        v-model:page-size="store.pageSize"
        :page-size-options="['10', '20', '50']"
        :total="store.total"
        :show-total="total => `共 ${total} 条`"
        show-size-changer
        @change="onPageChange"
      >
      </a-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useApplicationStore } from '@/stores/applicationStore'
import { useUserStore } from '@/stores/userStore'
import { message } from 'ant-design-vue'
import server from '@/api/index'
import dayjs from 'dayjs'

const store = useApplicationStore()
const userStore = useUserStore()

const columns = [
  {
    title: '投递人',
    dataIndex: 'userName',
    key: 'userName',
  },
  {
    title: '职位',
    dataIndex: 'positionName',
    key: 'positionName',
  },
  {
    title: '公司',
    dataIndex: 'companyName',
    key: 'companyName',
  },
  {
    title: '工作地',
    dataIndex: 'location',
    key: 'location',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
]
const onPageChange = async (page, pageSize) => {
  store.page = page
  store.pageSize = pageSize
  getMyApplication()
}
const search = async () => {}
const reset = () => {}

const getMyApplication = async () => {
  try {
    const res = await server.getMyApplication({
      current: store.page,
      pageSize: store.pageSize,
      userId: userStore.userAccount,
      userAccount: userStore.userAccount,
    })
    if (res.data.code === 0) {
      store.applicationList = res.data.data.records
      store.applicationList.map(item => {
        item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
        switch (item.status) {
          case 1:
            item.status = '已发送'
            break
          case 2:
            item.status = '已回复'
            break
          case 3:
            item.status = '已拒绝'
            break
          case 4:
            item.status = '流程中'
            break
        }
      })
      store.total = res.data.data.total
    } else {
      message.error(res.data.message)
    }
  } catch (e) {
    message.error(e)
  }
}
onMounted(() => {
  getMyApplication()
})
</script>

<style lang="scss" scoped>
.container {
  // display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .form-content {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0;

    .search-botton {
      margin-right: 10px;
    }
  }

  .table-content {
    padding: 15px;
  }

  .page-content {
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
  }
}
</style>
